<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tree</title>
<script type="text/javascript" src="static/easyui/jquery.min.js"
	charset="utf-8"></script>
<link rel="stylesheet" href="/static/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="/static/easyui/themes/icon.css">
<script type="text/javascript" src="static/easyui/jquery.easyui.min.js"
	charset="utf-8"></script>
<script type="text/javascript"
	src="static/easyui/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
<script type="text/javascript" src="/static/js/yzy.js"></script>
<script type="text/javascript">
	var flag;//判断执行时保存还是修改
	$(function(){
		$('#tree_one').tree({
			url:'tree/treelist',
			animate:true,//定义节点在展开或折叠的时候是否显示动画效果
			checkbox:false,//定义是否在每一个节点之前都显示复选框。
			cascadeCheck:false,//定义是否层叠选中状态。
			onlyLeafCheck:false,//定义是否只在末级节点之前显示复选框。
			dnd:true,//定义是否启用拖拽功能
			onDrop:function(target , source , point){/* 拖拽 连接后台 */
				//console.info(); 在网页控制台打印出结果
				var tar=$('#tree_one').tree('getNode',target);
				$.ajax({
					type:'post',
					url:'tree/changeLevel',
					data:{
						targetId:tar.id,
						sourceId:source.id,
						point:point
					},
					dataType:'text',
					cache:false,
					success:function(result){
						$.messager.show({
							title:'提示信息',
							msg:'操作成功'
						})
					}
				});
			},
			onContextMenu: function(e,node){
				//禁止阅览器窗口打开
				e.preventDefault();
				//右击选中状态
				$(this).tree('select',node.target);
				$('#mm').menu('show',{
					left:e.pageX,
					top:e.pageY
				})
			}
			
		});
		
		//保存按钮
		$('#savebtn').click(function(){
			if(flag =='add'){
				//1.页面增加一个节点
				//(1)获取选中的节点，也就是父节点
				var parent= $('#tree_one').tree('getSelected');
				//(2)调用追加节点的方法
				$('#tree_one').tree('append',{
					parent:parent.target,
					data:[{
						text: $('#myform').find('input[name=name]').val(),//获取我们输入的名称
						attributes:{
							url:$('#myform').find('input[name=url]').val()
						}
						
					}]
				});
				$.ajax({
					type:'post',
					url:'tree/treeadd',
					cache:false,
					data:{
						parentId:parent.id,
						name:$('#myform').find('input[name=name]').val(),
						url:$('#myform').find('input[name=url]').val()
					},
					dataType:'text',
					success:function(result){
						//刷新当前节点
						$('#tree_one').tree('reload',parent.target);
						
						$.messager.show({
							title:'提示信息',
							msg:'新增操作成功'
						});
					}
				});
				//关闭弹框
				$('#mydiv').dialog('close');
			}else{
				$.ajax({
					type:'post',
					url:'tree/treeadd',
					cache:false,
					data:{
						name:$('#myform').find('input[name=name]').val(),
						url:$('#myform').find('input[name=url]').val(),
						id:$('#myform').find('input[name=id]').val()
					},
					dataType:'text',
					success:function(result){
						//刷新节点(选中父节点)
						var node= $('#tree_one').tree('getSelected');
						var parent =$('#tree_one').tree('getParent',node.target);
						$('#tree_one').tree('reload',parent.target);
						//给出提示
						$.messager.show({
							title:'提示信息',
							msg:'修改操作成功'
						});
					}
				});
				//关闭弹框
				$('#mydiv').dialog('close');
			}
			
		});
		
		//取消按钮
		$('#cancelbtn').click(function(){
			$('#mydiv').dialog('close');
		});
	});
	//新增
	function append(){
		//清空form表单
		flag = 'add',
		$('#myform').form('clear');
		$('#mydiv').dialog({title:"新增"});
		$('#mydiv').dialog('open');
	}
	//修改
	function editor(){
		//清空form表单
		flag = 'edit',
		$('#myform').form('clear');
		var node= $('#tree_one').tree('getSelected');
		$('#myform').form('load',{
			id:node.id,
			name:node.text,
			url:node.attributes.url,
		});
		//打开div
		$('#mydiv').dialog({title:"修改"});
		$('#mydiv').dialog('open');
	}
	//删除
	function remove(){
		var node = $('#tree_one').tree('getSelected');
		$('#tree_one').tree('remove', node.target);
		$.post('tree/remove',{id:node.id},function(reuslt){
			$.messager.show({
				title:'提示信息',
				msg:'删除成功',
			});
		});
	}
</script>
</head>
<body>
	<ul id="tree_one"></ul>
	<div id="mydiv" class="easyui-dialog" title="操作" style="width: 250px" modal="true" closed="true">
		<form action="" method="post" id="myform">
			<input type="hidden" name="id">
			<table>
				<tr>
					<td>权限名称</td>
					<td><input type="text" name="name" /></td>
				</tr>
				<tr>
					<td>url</td>
					<td><input type="text" name="url" /></td>
				</tr>
				<tr align="center">
					<td colspan="2">
						<a id="savebtn" class="easyui-linkbutton">保存</a>
						<a id="cancelbtn" class="easyui-linkbutton">取消</a>
					</td>
				</tr>
			</table>
		</form>
	</div>
	<div id="mm" class="easyui-menu" style="width: 150px;">
		<div onclick="append()" data-options="iconCls:'icon-add'">新增</div>
		<div onclick="editor()" data-options="iconCls:'icon-edit'">修改</div>
		<div onclick="remove()" data-options="iconCls:'icon-remove'">删除</div>
	</div>
</body>
</html>